<template>
    <div class="box">
      <h2>Son1 子组件</h2>
      从vuex中获取的值: <label>{{ $store.state.count }}</label>
      <br>
      <button @click="handleAdd(1)">值 + 1</button>
      <button @click="handleAdd(5)">值 + 5</button>
      <button @click="handleAdd(10)">值 + 10</button>
      <button @click="handleChange">一秒后系改成879</button>
      <button @click="changeTitle('666')">改标题</button>

      <hr>
      <div>{{ $store.state.list }}</div>
      <div>{{ $store.getters.filterList }}</div>

      <hr>
      <!-- 测试访问模块中的state - 通过原生 -->
      <div>{{ $store.state.user.userInfo.name }}</div>
      <button @click="updateUser">更新个人信息</button>
      <button @click="updateUser2">一秒后更新信息</button>

      <div>{{ $store.state.setting.theme }}</div>
      <button @click="updateTheme">更新主题色</button>
      <button @click="updateTheme2">一秒后更新主题色</button>

      <hr>
      <!--测试访问模块中的getters - 原生  -->
      <div>{{ $store.getters['user/UpperCaseName'] }}</div>
    </div>
</template>

<script>
export default {
  name: 'Son1Com',
  methods: {
    updateUser () {
      // $store.commit('模块名/mutation名'，额外传参)
      this.$store.commit('user/setUser', {
        name: 'xiaowang',
        age: 25
      })
    },
    updateUser2 () {
      // 调用action dispatch
      this.$store.dispatch('user/setUserSecond', {
        name: 'xiaohong',
        age: 16
      })
    },
    updateTheme () {
      this.$store.commit('setting/setTheme', 'pink')
    },
    updateTheme2 () {
      this.$store.dispatch('setting/setThemeSecond', 'blue')
    },
    handleAdd (n) {
      // 错误代码（vue默认不会监测，监测需要成本）
    //   this.$store.state.count++
    //   console.log(this.$store.state.count)

      // 应该通过 mutation 核心概念，进行修改数据
      // 需要调教调用mutation

      // 调用带参数的mutation函数
      // 注意点：mutation参数有且只有一个，如果需要多个参数，包装成一个对象
      this.$store.commit('addCount', {
        count: n,
        msg: '哈哈'
      })
    },
    changeTitle (newTitle) {
      this.$store.commit('changeTitle', newTitle)
    },
    handleChange () {
      // 调用action
      // this.$store.dispatch('action名字', 额外参数)
      this.$store.dispatch('changeCountAsync', 666)
    }
  }

}
</script>

  <style lang="css" scoped>
  .box{
    border: 3px solid #ccc;
    width: 400px;
    padding: 10px;
    margin: 20px;
  }
  h2 {
    margin-top: 10px;
  }
  </style>
